import React, { useEffect, useMemo, useState } from 'react'
import { SearchBar, Tabs} from 'antd-mobile'
import { getType, getDise } from '../request/axios'
import './HomeInfo.scss'
import DescInfo from '../component/DescInfo'
import Popup from '../component/Popup'
export default function HomeView() {
    let [types, setTypes] = useState([])
    let [data, setData] = useState([])
    const [activeKey, setActiveKey] = useState('女装')
    const [receiveMsg, setReceiveMsg] = useState('')
    const getList = async () => {
        const { data: { data } } = await getType()
        setTypes(data)
    }
    const getDiseList = async () => {
        const { data: { data } } = await getDise()
        setData(data);
    }
    const handleReceiveMsg = (receiveMsg) => {
        setReceiveMsg(receiveMsg)
    }
    useEffect(() => {
        getList()
        getDiseList()
    }, [])
    return (
        <div>
            <div className="tabsContainer">
                <div className="search ">
                    <SearchBar placeholder='搜索商品'></SearchBar>
                </div>
                <div className="cate ">
                    <Tabs defaultActiveKey='女装' activeKey={activeKey} onChange={setActiveKey}>
                        {
                            types.map(item => (
                                <Tabs.Tab title={item.name} key={item.name}>

                                </Tabs.Tab>
                            ))
                        }
                    </Tabs>
                </div>

            </div>

            <div className="content">
                {
                    data.map(item => (
                        item.type === activeKey &&
                        <DescInfo data={item} key={item._id} onReceiveMessage={handleReceiveMsg}></DescInfo>
                    ))
                }
            </div >
            <div className="Popup">
                <Popup data={receiveMsg?receiveMsg:null} visible={true}></Popup>
            </div>


        </div >
    )
}
